<script lang="ts" setup>
import { ref,onBeforeUpdate} from 'vue'
import {ElPagination} from 'element-plus'

const emit = defineEmits(['updateItemList']);
// 接收父组件传递的数据()
const props = defineProps({
    itemList: {//数据列表
        type: Array,
        default: null
    },
    count: {//有值则分页功能后端实现
        type: Number,
        default: null

    },

})
//--------------------------------------------------------数据分页------------------------------------------------------------------
const itemList = ref([])//待分页全部数据
const limitItemList = ref([])//分页后数据
const currentPage = ref(1); // 当前页码默认
const pageSize = ref(10); // 每页显示数量
//全部数据按每页展示数量、页码截取
const displayedItemList = () => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const endIndex = startIndex + pageSize.value;
    limitItemList.value = itemList.value.slice(startIndex, endIndex);
};

//选中页设置为当前页
function changePage(page:number) {
    currentPage.value = page
  
}
//------------------------------------------------------------------------------------------------------------------------------------

//预处理
onBeforeUpdate(() => {
    if (props.count != null&&props.itemList==null) {
        emit('updateItemList', currentPage.value)
        return
    }
        itemList.value = props.itemList
        displayedItemList()
        emit('updateItemList', limitItemList.value)
})
</script>
<template>
    <div style="display: flex;justify-content: center;margin-top: 10px;">
        <el-pagination  layout="prev, pager, next"
            :total="props.count == null ? itemList.length : props.count"
            :current-page.sync="currentPage"
            :page-size="pageSize" 
            @current-change="changePage" 
            prev-text="上一页" 
            next-text="下一页">
        </el-pagination>
    </div>
</template>

<style scoped>


</style>